Glisp Help: スタイルの応用

Glisp Help: はじめてのスケッチでも解説したとおり、エレメントはスタイルを適用することに初めて描画されます。スタイルは色や線幅など様々なプロパティからなりますが、それらはあるルールに基づいて継承、描画され、また参照することができます。

プロパティの参照

style関数の内側では、適用されているスタイルのプロパティにアクセスすることができます。

code:clj

(style (fill "pink")

(text *fill-color* 50 50 :size 24))

Open in Editor

ここでは、外側の fill関数で設定された "pink"を、シンボル *fill-color* によって参照しています。（*で挟まれた変数名は、グローバル変数のようなシンボルを表しています）同様に*stroke-color*や、 *stroke-width*、*stroke-cap* で線のプロパティにアクセスすることもできます。これはフローチャートなど、縁取りと同じ色でテキストを塗るときにも便利です。

code:clj

(style (stroke "royalblue" 2)

(ngon 50 50 40 4)

(style (no-stroke) (fill *stroke-color*)

(text "Hello" 50 50)))

Open in Editor

ここで no-stroke 関数が登場していますが、これによって、それ以前に適用された塗りを無効にすることができます。以下のようなイメージです。

code:clj

(stroke "royalblue" 2) -> (no-stroke) -> (fill *stroke-color*)

;^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^

;no-stroke によって打ち消される打ち消されてもなお *stroke-color* は "royalblue" に設定されている

こうすることで、Hello というテキストに線が適用され、太くなってしまうのを防ぎます。これは矢印を描くときにも使えます。

スタイルの実体

fill や strokeは、 CSS のようなプロパティ名をキーに持つ連想配列を返すただの関数です。

code:clj

(fill "pink") -> {:fill true :fill-color "pink"}

(stroke "skyblue" 10) -> {:stroke true :stroke-color "skyblue" :stroke-width 10}

CSS と違うのは、「スタイルを有効にするかどうか」と、そのスタイルへの色指定とが別のプロパティになっている点です。CSSにおけるfill: "pink"; という指定は、塗りを有効にすると同時に塗りの色も設定しています。しかしGlispでは、塗りを有功にするには {:fill true}、塗りの色の指定には {:fill-color: "color-name"}のように、プロパティとして独立しています。この仕組みによって、style関数の内側のパス全てを塗ることなく、塗り色のデフォルトを設定することが可能です。

code:clj

(style {:stroke-dash 15 4}

(style (stroke "crimson" 2)

(circle 50 50 40))

(style (stroke "plum" 2 :dash 4 4)

(ngon 50 50 40 5)))

CSSのようにスタイルは内側のエレメントへと継承されていきます。同じプロパティが設定された場合は、子要素に近い箇所で設定されたスタイルが優先されます。

code:clj

(style {:stroke-dash 15 4}

(style (stroke "crimson" 2)

(circle 50 50 40))

(style (stroke "plum" 2 :dash 4 4)